<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JS图片格式转化与下载保存</title>
</head>

<body>
    <div>
        
        <input type="file" id="fileInputer" accept="image/*" multiple="multiple">        
        最大宽度<input id="max_width" type="text" value="1600" size="4">
        最大高度<input id="max_height" type="text" value="1200" size="4">
        输出格式<select id='format'>
            <option value="auto">jpeg/png最优</option>
            <option value="">使用原图格式</option>
            <option value="jpeg">jpg</option>
            <option>png</option>
            <option>webp</option>
            <optino>gif</optino>
        </select>
        <input type='button' value="重绘" id="redraw">
        <input type='button' value="上一张" id="prevImage">
        <input type='button' value="下一张" id="nextImage">
        <br><img src="" alt="" id="preview"><br>
    </div>
</body>
<script src="./lib/img_converter.js"></script>
<script>
let IL = new ImageLib();
let fileObjects = [];
let fileIndex = 0;
function click(domObj) {
    if (document.all) {
        domObj.click();
    } else {
        let e = document.createEvent("MouseEvents");
        e.initEvent('click', true, true);
        domObj.dispatchEvent(e);
    }
}
let fileInputer = document.getElementById('fileInputer');
let previewer = document.getElementById('preview');
fileInputer.addEventListener('change', function (e) {
    if (e.target.files) {
        fileObjects = e.target.files;
        fileIndex = 0;
        changeFile(fileObjects[0]);
    }
});
function switchImage(delta) {
    if (fileObjects.length <= 0) {
        click(fileInputer);
    } else {
        if (fileIndex + delta < 0) {
            delta += fileObjects.length;
        }
        fileIndex = (fileIndex + delta) % fileObjects.length;
        changeFile(fileObjects[fileIndex]);
    }
}
document.getElementById('prevImage').addEventListener('click', function() {
    switchImage(-1);
});
document.getElementById('nextImage').addEventListener('click', function() {
    switchImage(1);
});
document.getElementById('redraw').addEventListener('click', function(e) {
    convert();
});

function getMaxSize() {
    let maxWidth = parseInt(document.getElementById("max_width").value);
    let maxHeight = parseInt(document.getElementById("max_height").value);
    if (maxWidth <= 0) {
        maxWidth = 1600;
        document.getElementById("max_width").value = maxWidth;
    } 
    if (maxHeight <= 0) {
        maxHeight = 1200;
        document.getElementById("max_height").value = maxHeight;
    }
    return {
        width: maxWidth,
        height: maxHeight
    };
}

//点击图片下载
previewer.onclick = function (e) {
    console.log(e)
    let oA = document.createElement("a");
    let type = e.target.dataset.type;
    if (type == 'jpeg') type = 'jpg';
    oA.download = e.target.dataset.formerName.replace(/(.*)\.\w+$/, '$1.') + type;
    oA.href = event.target.src;
    document.body.appendChild(oA);
    oA.click();
    oA.remove();
}

function convert() {
    let size = getMaxSize();
    let formatInput = document.getElementById('format');
    let type = formatInput.options[formatInput.selectedIndex].value;
    if (type == 'auto') {
        type = IL.getBestType()
    }
    console.log('use type', type);
    previewer.src = IL.setImageMaxSize(size.width, size.height).getImageDataURL(type);
    previewer.dataset.type = IL.getLastImageType();
    previewer.dataset.formerName = fileObjects[fileIndex].name;
}
function changeFile(file) {
    if (!file) return;
    IL.setFile(file, (result) => {
        if (!result) {
            alert('failed to load image');
        }
        convert();
    });
}
</script>